import React, {Component} from 'react'
import {Card, Button} from 'antd'
import ReactEcharts from 'echarts-for-react'

/*
后台管理的柱状图路由组件
 */
export default class Bar extends Component {

    state = {
        sales: [5, 20, 36, 10, 10, 20, 20, 30], // 销量的数组
        stores: [6, 10, 25, 20, 15, 10, 30, 10], // 库存的数组
    }

    update = () => {
        this.setState(state => ({
            sales: state.sales.map(sale => sale + 1),
            stores: state.stores.reduce((pre, store) => {
                pre.push(store-1)
                return pre
            }, []),
        }))
    }

    /*
    返回柱状图的配置对象
     */
    getOption = (sales, stores) => {
        return {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data:['真', '假']
            },
            xAxis: {
                data: ["科技","政治","军事","财经商业","社会生活","文体娱乐","医药健康","教育考试"]
            },
            yAxis: {},
            series: [{
                name: '真',
                type: 'bar',
                data: sales
            }, {
                name: '假',
                type: 'bar',
                data: stores
            }]
        }
    }

    render() {
        const {sales, stores} = this.state
        return (
            <div>
                <Card>
                    <Button type='primary' onClick={this.update}>更新</Button>
                </Card>

                <Card title='柱状图一'>
                    <ReactEcharts option={this.getOption(sales, stores)} />
                </Card>

            </div>
        )
    }
}